<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"  th:src="@{/js/jquery-2.1.4.min.js}"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"  th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
    <link type="text/css" href="/js/bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
    <script type="text/javascript" src="/js/bootstrap-treeview/bootstrap-treeview.min.js" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
    <link type="text/css" href="/js/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
    <script type="text/javascript" src="/js/bootStrap-addTabs/bootstrap.addtabs.min.js" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
    <link type="text/css" href="/js/bootStrap-addTabs/bootstrap.addtabs.css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
    <script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.js" th:src="@{/js/bootstrap-table/bootstrap-table.js}"></script>
    <link type="text/css"  href="/js/bootstrap-table/bootstrap-table.css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.css}">
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.min.js" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
    <script type="text/javascript" src="/js/bootstrap-bootbox/bootbox.js"  th:src="@{/js/bootstrap-bootbox/bootbox.js}"></script>
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js" th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>
    <link type="text/css" href="/js/bootstrap-fileinput/css/fileinput.min.css"  rel="stylesheet" th:href="@{/js/bootstrap-fileinput/css/fileinput.min.css}">

<body>
<div id="toolbar">
    <form class="form-inline">
        <div  class="form-group">
            <label for="userName">姓名：</label>
            <input class="form-control" id="userName" placeholder="请输入名称">
        </div>
        <div  class="form-group">
            <label for="userSite">地址：</label>
            <input class="form-control" id="userSite" placeholder="请输入地址">
        </div>
        <div  class="form-group">
            <label for="startDate">创建时间：</label>
            <input class="form-control date" id="startDate" type="date">
        </div>
        <div  class="form-group">
            <label for="endDate">至</label>
            <input class="form-control date" id="endDate" type="date">
        </div>

        <div  class="form-group">
            <label for="maxAge">年龄：</label>
            <input class="form-control date" id="maxAge">
        </div>
        <div  class="form-group">
            <label for="minAge">至</label>
            <input class="form-control date" id="minAge" >
        </div>
        <button onclick="search()" class="btn btn-primary glyphicon glyphicon-search" type="button">搜索</button>
        <button onclick="getSort()" class="btn btn-primary glyphicon glyphicon-search" type="button">年龄排序↑↓</button>
        <button onclick="dateOut()" class="btn btn-primary glyphicon glyphicon-search" type="button">注册时间排序↑↓</button>
        <button onclick="moneyOut()" class="btn btn-primary glyphicon glyphicon-search" type="button">总金额排序↑↓ </button>
    </form>
</div>
<table id="table"></table>
</body>
<script>
    //页面加载方法
    $(function(){
        initUserTable2();
    })
    //初始化用户表格
    function initUserTable2(){
        $("#table").bootstrapTable({
            url:"../user/findDelUser",
            method : 'GET', //请求方式（*）
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped : true, //是否显示行间隔色
            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination : true, //是否显示分页（*）
            sortable : true, //是否启用排序
            sortOrder : "asc", //排序方式
            sidePagination : "client", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber : 1, //初始化加载第一页，默认第一页,并记录
            pageSize : 3, //每页的记录行数（*）
            pageList : [ 3,6,9,20], //可供选择的每页的行数（*）
            search : false, //是否显示表格搜索
            strictSearch : true,
            showRefresh : true, //是否显示刷新按钮     //可供选择的每页的行数（*）
            toolbar:"#toolbar",
            columns:[{checkbox : true,
                visible : true},
                {title:"id",field:"userId",width:100},
                {title:"账户",field:"userNum",width:100},
                {title:"密码",field:"userPwd",width:100},
                {title:"姓名",field:"userName",width:100},
                {title:"电话",field:"useriPhone",width:100},
                {title:"邮箱",field:"userEmail",width:100},
                {title:"性别",field:"userSex",width:100,
                    formatter:function(value,row,index){
                        return value==null ?"" :value==1?"男":"女";
                    }},
                {title:"出生日期",field:"userDate",width:100},
                {title:"身份证号",field:"userCard",width:100},
                {title:"头像",field:"userImg",width:100,
                    formatter:function(value,row,index){
                        return '<img  src='+value+' width="50" height="50"/> ';
                    }
                },
                {title:"创建时间",field:"createDate",width:100},
                {title:"总消费金额",field:"totalSum",width:100},
                {title:"状态",field:"userStatus",width:100,
                    formatter:function(value,row,index){
                        if (value==1){
                            return "正常";
                        }
                        else if(value==2){
                            return "冻结";
                        }
                        else if(value==3){
                            return "回收站";
                        }
                    }},
                {title:"地址",field:"userSite",width:100},
                {title:"ip",field:"userIp",width:100},
                {title:"年龄",field:"userAge",width:100},
                {title:'操作',field:'s',
                    formatter:function(value,row,index){

                        str= "<button  onclick='onUser("+row.userId+")'  type='button' class='btn btn-primary'>恢复</button>";

                        return str;
                    }},
            ],
        })
    }
    //逻辑删除
    function  onUser(id){
        $.ajax({
            url:"../user/onUser",
            data:{id:id},
            type:"post",
            success:function(){
                $("#table").bootstrapTable("refresh");
            }
        })
    }
    //年领排序
    var code=0;
    function   getSort(){
        code++;
        if (code%2==1){
            code=1;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userId":code,
                }
            });
        }
        else if(code%2==0){
            code=2;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userId":code,
                }
            });
        }
    }

    //日期排序
    var i=0;
    function   dateOut(){
        i++;
        if (i%2==1){
            i=1;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userStatus":i,
                }
            });
        }
        else if(i%2==0){
            i=2;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userStatus":i,
                }
            });
        }
    }
    //金额排序
    var a=0;
    function   moneyOut(){
        a++;
        if (a%2==1){
            a=1;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "moneyOut":a,
                }
            });
        }
        else if(a%2==0){
            a=2;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "moneyOut":a,
                }
            });
        }
    }

</script>
</html>